<template>
	<view class="page page-container">
		<view class="m-panel-bd">
			<view class="m-media-box m-media-box-small-appmsg">
				<view :class="{'m-cells':1, iconBoxLattice:false}">

					<navigator url="/member/member/data" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-yaoqinghaoyou"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('基本信息') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

					<navigator url="/member/member/bindphone" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-mobile"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('手机绑定') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>
					<navigator url="/member/member/setpassword" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-mima"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('登录密码') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

					<navigator url="/member/member/paypwd" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-mima"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('支付密码') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

					<navigator url="/member/member/certification" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-shimingrenzheng"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('实名认证') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

					<navigator url="/member/member/certifiedsns" class="m-cell m-cell-access" v-if="Config.SNS_ENABLE && false">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-shimingrenzheng"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('认证会员') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

<!--					<navigator url="/member/member/protocol?id=withdraw_protocols_description" class="m-cell m-cell-access" v-if="false">-->
<!--						<view class="m-cell-hd " style="color:#DB384C">-->
<!--							<label class="iconfont zc zc-daipingjia"></label>-->
<!--						</view>-->
<!--						<view class="m-cell-bd m-cell-primary">-->
<!--							<p>{{ __('提现协议') }}</p>-->
<!--						</view>-->
<!--						<text class="m-cell-ft"></text>-->
<!--					</navigator>-->

<!--					<navigator url="/member/cash/bankcard-list" class="m-cell m-cell-access">-->
<!--						<view class="m-cell-hd " style="color:#DB384C">-->
<!--							<label class="iconfont zc zc-yinhangqia"></label>-->
<!--						</view>-->
<!--						<view class="m-cell-bd m-cell-primary">-->
<!--							<p>{{ __('提现账户') }}</p>-->
<!--						</view>-->
<!--						<text class="m-cell-ft"></text>-->
<!--					</navigator>-->

					<navigator url="/member/member/company-authentication" class="m-cell m-cell-access" v-if="b2b_enable">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-qiyerenzheng"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('企业认证') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>

					<navigator url="/member/member/protocol?id=reg_privacy_protocols&no_btn=1" class="m-cell m-cell-access" v-if="true">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-yinsi"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('隐私政策') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="m-panel-bd">
			<view class="m-media-box m-media-box-small-appmsg">
				<view :class="{'m-cells':1, iconBoxLattice:false}">

					<navigator url="/member/member/logout?id=1000" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-zhuxiao"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('账号注销') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>
					<navigator url="/member/member/feedback" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-yijianfankui"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('用户反馈') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>
					<navigator url="/pagesub/index/about" class="m-cell m-cell-access">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-guanyu"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<p>{{ __('关于我们') }}</p>
						</view>
						<text class="m-cell-ft"></text>
					</navigator>
				</view>
			</view>
		</view>

		<view class="m-panel-bd">
			<view class="m-media-box m-media-box-small-appmsg">
				<view :class="{'m-cells':1, iconBoxLattice:false}">
					<view class="m-cell m-cell-access" @click="cleanCache">
						<view class="m-cell-hd " style="color:#DB384C">
							<label class="iconfont zc zc-logout"></label>
						</view>
						<view class="m-cell-bd m-cell-primary">
							<label>{{ __('退出登录') }}</label>
						</view>
						<text class="m-cell-ft"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-tips" style="margin:30rpx 0" v-if="(!IsChannel)">
			<view class="m-tips-logo">
				<image lazy-load mode="aspectFit" src="/static/images/logo_tech.png"></image>
			</view>
			<view class="m-tips-str">{{ __('商城套件系统提供技术支持') }} {{ versionNumber }}</view>
		</view>
		<view class="m-tips" style="margin:30rpx 0" v-else>
			<view class="m-tips-str">{{ versionName }}{{ versionNumber }}</view>
		</view>
		<view class='msk' v-if='(isGetnum&&isWexinMobile)'>
			<view class='model'>
				<view class='hint'>
					<view class='title'>{{ __('绑定手机号') }}</view>
					<view class='content'>{{ __('您当前尚未绑定手机号，建议您绑定以获得更多优惠资讯') }}</view>
				</view>
				<view class='operation'>
					<view class='cancel' @click='cancel'>{{ __('取消') }}</view>
					<button class='success' bindgetphonenumber='getPhoneNumber' open-type='getPhoneNumber'>{{ __('确定') }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data: function() {
			return {
				Info: '',
				UserInfo: {
					user_nickname: "新用户",
					user_avatar: "https://static.shopsuite.cn/demodata/assets/data/avatar.png",
				},
				resource: {
					user_points: 100
				},
				versionNumber: '',
				versionName: '',
				IsChannel: true,
				isMembership: true,
				isCoupon: true,
				isCutPrice: true,
				isECashCard: true,
				isMemDist: true,
				isFightGrp: true,
				isAbtVendor: true,
				currentSize: 0,
				limitSize: 0,
				b2b_enable: false,
				isStorage: false,
				isGetnum: false,
				isWexinMobile: false,
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		async onLoad(options) {
			await this.$onLaunched;

			uni.setNavigationBarTitle({
				title: this.__('用户设置')
			});

			var that = this;

			this.forceUserInfo(function(user) {});


			that.load();

			// #ifdef MP-WEIXIN
			if (!that.userInfo.user_mobile) {
				that.isWexinMobile = true;
			}
			// #endif
		},

		onShow: function(opt) {
			let that = this;
			/*
			const info = that.$.storage.info();

			this.setData({
			  currentSize: Math.round(info.currentSize * 100) / 100,
			  limitSize: Math.round(info.limitSize / 1024 * 100) / 100
			})
			*/

			this.setData({
				UserInfo: this.userInfo
			});


			this.showCartNum();
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'showCartNum']),
			load: function() {
				var that = this;


				this.getPlantformInfo(function(plantformInfo) {
					that.setData({
						//IsChannel: this.shopInfo.IsChannel,
						versionNumber: plantformInfo.version,
						versionName: plantformInfo.site_name,
						b2b_enable: plantformInfo.b2b_enable,
					})
				});
			},

			cancel: function() {
				let that = this;
				this.setData({
					isGetnum: false
				}), that.$.setStorage({
					key: 'cancel',
					data: 'yes'
				})
			},

			getPhoneNumber: function(e) {
				var that = this
				that.$.login({
					success: function(n) {
						var r = {
							//vendorId: that.cf.storeId,
							userId: that.userInfo.Id,
							encryptData: e.detail.encryptedData,
							encryptDataIV: e.detail.iv,
							code: n.code
						}
						that.$.xsr(that.$.makeUrl(user.UpdateUserWexinMobile, r), function(e) {
							e.Code == 0 && (that.userInfo.Phone = e.Info, that.setData({
								isGetnum: false
							}))
						})
					}
				})
			},

			selectAddress: function(e) {
				var that = this;
				that.$.gopage('/member/address/list')
				/*that.$.chooseAddress({
				    success: function (that)
				    {
				        that.$.navigateTo("/member/address/list");
				    }, fail: function (that)
				    {
				        that.$.navigateTo("/member/address/list");
				    }
				})*/
			},

			goTabBar: function(e) {
				var that = this
				that.$.goToTabBar(that, e.currentTarget.dataset.url)
			},

			cleanCache: function(e) {
				var that = this
				const index = e.currentTarget.dataset.index
				const path = e.currentTarget.dataset.path

				that.$.confirm(that.__('确定要退出登录吗？'), function(data) {
					if (data.confirm) {
						that.$.request({
							url: that.Config.URL.logout,
							success: function(data, status, msg, code) {
								// #ifdef APP-PLUS
								plus.navigator.removeAllCookie();
								// #endif

								// #ifdef H5
								var date = new Date();
								date.setTime(date.getTime() - 10000);
								var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
								if (keys) {
									for (var i = keys.length; i--;)
										document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
								}
								// #endif

								that.$.storage.removeItem('uid');
								that.$.storage.removeItem('ukey');


								const language = uni.getStorageSync('selang')

								that.$.storage.clear();

								//如果不在允许的语言内，可重置
								uni.setStorageSync('selang', language);

								// #ifdef MP-WEIXIN
								var info = that.$.storage.info();

								that.setData({
									currentSize: Math.round(info.currentSize * 100) / 100,
									limitSize: Math.round((info.limitSize / 1024) * 100) / 100
								});
								// #endif

								//退出登录
								that.logout(true);
							}
						})
					}
				}, true)
			},
			distributionWeStore: function(e) {
				var that = this;
				that.$.gopage("/pagesub/westore/index");

				//let url = that.$.sprintf('%s/tmpl/member/plantform_invite.html?u_id=%d&opener=uni&sss=ssss', that.Config.WapSiteUrl, that.userInfo.user_id);
				//that.$.gopage("/pagesub/webpage/webpage?u=" + encodeURIComponent(url) + "&tn=" + '推广中心' + "&tc=" + '#ff6700' + "&tb=" + 'white')
			}
		}
	};
</script>


<style lang="scss">
	@import "../../styles/_variables.scss";

	.member-top {
		-webkit-animation: changeBg 20s infinite;
		animation: changeBg 20s infinite;
		background-color: #ff6700;
		background-image: url("");
		background-size: cover;
		text-align: center;
		width: 100%;
		/*height: 11rem;*/

		overflow: hidden;
		height: 480rpx;
		/* 320 */

		color: #fff;
		position: relative;
		z-index: 1;
	}

	@-webkit-keyframes changeBg {
		0% {
			background-color: #ff6700
		}

		90% {
			background-color: #ff6700
		}

		10% {
			background-color: #FB6E52
		}

		20% {
			background-color: #FFCE55
		}

		30% {
			background-color: #A0D468
		}

		40% {
			background-color: #48CFAE
		}

		50% {
			background-color: #4FC0E8
		}

		60% {
			background-color: #5D9CEC
		}

		70% {
			background-color: #AC92ED
		}

		80% {
			background-color: #EC87BF
		}
	}

	@keyframes changeBg {
		0% {
			background-color: #ff6700
		}

		90% {
			background-color: #ff6700
		}

		10% {
			background-color: #FB6E52
		}

		20% {
			background-color: #FFCE55
		}

		30% {
			background-color: #A0D468
		}

		40% {
			background-color: #48CFAE
		}

		50% {
			background-color: #4FC0E8
		}

		60% {
			background-color: #5D9CEC
		}

		70% {
			background-color: #AC92ED
		}

		80% {
			background-color: #EC87BF
		}
	}

	.m-banner-img {
		width: 100%;
		/*height: 200rpx;*/
		vertical-align: top;
		position: relative;
	}

	.m-user-info {
		position: absolute;
		top: 115rpx;
		width: 140rpx;
		height: 140rpx;
		text-align: center;
		left: 50%;
		margin-left: -70rpx;
		z-index: 3;
		color: #666;
	}

	.m-user-info image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 120rpx;
		border: 1px solid #fff;
		vertical-align: middle;
		box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);
	}

	.m-user-info text {
		line-height: 70rpx;
		display: block;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #fff;
		font-weight: bold;
	}

	.m-user-info .Phone {
		width: 140rpx;
		height: 140rpx;
		border-radius: 120rpx;
		border: 1px solid #fff;
		vertical-align: middle;
		box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);
		overflow: hidden;
	}

	.m-user-info .NickName {
		line-height: 70rpx;
		display: block;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.member-order-tab {
		font-size: 12px;
		text-align: center;
		background: rgba(0, 0, 0, .1);
		line-height: 20px;
		/*box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);*/

		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.i-type {
		font-size: 40rpx;
	}

	.m-cell-hd {
		text-align: center;
		line-height: 56rpx;
	}

	.member-order-tab .g-flex-item {
		padding: 28rpx 0 20rpx 0;
	}

	.member-order-tab .g-flex-item:active {
		background-color: #ececec;
	}

	.my_od {
		border-left: 1px solid #dfdfdf;
	}

	.all_order {
		position: relative;
		display: block;
	}

	.m-panel-bd {
		margin-top: 20rpx;
	}

	.m-panel-bd label {
		vertical-align: middle;
		font-size: 50rpx;
		margin: 0rpx 10rpx;
	}

	.m-cell-primary {
		font-size: 14px;
		margin-top: 10rpx;

		label {
			font-size: 14px;
		}
	}

	.m-animate-img {
		width: 100%;
		height: 250rpx;
		overflow: hidden;
		-webkit-animation: imageAnimation 15s linear infinite alternate;
		animation: imageAnimation 15s linear infinite alternate;
		webkit-backface-visibility: hidden;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		margin-top: -20px;
	}

	.m-animate-warp {
		overflow: hidden;
		height: 200rpx;
		-webkit-animation: imageAnimation 15s linear infinite alternate;
		animation: imageAnimation 15s linear infinite alternate;
	}

	@-webkit-keyframes imageAnimation {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 0 100%;
		}
	}

	@keyframes imageAnimation {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 0 100%;
		}
	}

	.iconBoxLattice .m-cell {
		display: inline-block;
		width: 25%;
		box-sizing: border-box;
		text-align: center;
		border-right: 1rpx solid #f8f8f8;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.iconBoxLattice .m-cell .iconfont {
		font-size: 60rpx;
	}

	.iconBoxLattice .m-cell::before {
		border: none;
	}

	.iconBoxLattice .m-cell p {
		font-size: 24rpx;
	}

	.iconBoxLattice .m-cell label {
		font-size: 24rpx;
	}

	.iconBoxLattice .m-cell label.iconfont {
		font-size: 60rpx;
	}


	.iconBoxLattice .m-cell image {
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 60rpx !important;
		height: 60rpx !important;
	}

	.iconBoxLattice .m-cell-ft {
		display: none;
	}


	.msk {
		position: fixed;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.model {
		width: 80%;
		height: 290rpx;
		background: #fff;
		border-radius: 6rpx;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0
	}

	.hint {
		height: 200rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.hint::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border-bottom: 1px solid #e5e5e5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.hint .title {
		font-size: 36rpx;
	}

	.hint .content {
		width: 80%;
		color: #999999;
		font-size: 30rpx;
		margin-top: 20rpx
	}

	.operation {
		height: 90rpx;
		display: flex;
		align-items: center
	}

	.cancel,
	.success {
		flex: 1;
		background: #fff;
		height: 90rpx;
		font-size: 36rpx
	}

	button::after {
		line-height: none
	}

	.cancel {
		position: relative;
		text-align: center;
		line-height: 90rpx
	}

	.success {
		color: #3cc51f;
		padding: 0
	}

	.cancel::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border-right: 2px solid #e5e5e5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.m-cell-bd label {
		margin: 0rpx 5rpx;
	}
</style>